<template>
	<view>
		<view v-for="(i,index) in value" :key="index">
			<view class="a-tree">
				<view class="title" @click="titlClick(index)">
					<checkbox @tap.stop="checkboxGroup(index)" :checked="i.checked">{{i.lable}}</checkbox>
					<!-- <text class="iconfont icon-icon-arrow-right2-copy"></text> -->
				</view>
				<a-tree v-model="i.child" v-if="show[index]" @change="$emit('change',$event)"></a-tree>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		name: 'a-tree',
		props: {
			value:{
				type: Array,
				default () {
					return [];
				}
			}
		},
		data(){
			return {
				show:[]
			}
		},
		methods: {
			titlClick(index){
				this.show.splice(index,1,!this.show[index]);
				this.$emit("click",!!this.show[index] && {...this.value[index]});
			},
			checkboxGroup(index){
				let value = [...this.value];
				let i = value[index];
				i.checked = !i.checked;
				i.child = (i.child || []).filter(x=>{
					x.checked = i.checked;
					return x;
				});
				this.$emit('change',value);
				this.$emit('input',value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.a-tree {
		margin: 0 0 0 25px;

		.title {
			display: flex;
			align-items: center;
			position: relative;
			padding: 10px 0;
			padding-right: 15px;
			margin-right: 20px;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				border-bottom: 1px solid rgba(0, 0, 0, 1);
				transform: scaleY(.2);
			}
		}

		.icon-icon-arrow-right2-copy {
			flex: 1;
			text-align: right;
		}
	}
</style>
